<template>
    <div class="card-item shadow-sm" v-loading="dataStatus=='loading'">
        <div class="item-chart flex items-center justify-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="getData"></component-page-loading>
        </div>
        <div class="item-chart flex items-center divide-x-2 border-gray-100 divide-dashed" v-else>
            <div class="px-5">{{ $t('index.monitoring.online') }}:
                <component-page-numeral :num="data.online"></component-page-numeral>
            </div>
            <div class="px-5">{{ $t('index.monitoring.online_ai') }}:
                <component-page-numeral :num="data.online_ai"></component-page-numeral>
            </div>
            <div class="px-5">{{ $t('index.monitoring.gaming') }}:
                <component-page-numeral :num="data.gaming"></component-page-numeral>
            </div>
            <div class="px-5">{{ $t('index.monitoring.gaming_ai') }}:
                <component-page-numeral :num="data.gaming_ai"></component-page-numeral>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataStatus: 'dle',
            data: [],
        }
    },
    methods: {
        getData() {
            this.dataStatus = 'loading';
            axios.get('/index/summary/monitoring').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.data = response.data.resp_data;
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            });
        },
    },
    mounted() {
        this.getData();
        // 定时更新在线人数
        this.intervalId = setInterval(() => {
            if (this.dataStatus != 'loading') {
                this.getData();
            }
        }, 10000);
    },
    beforeDestroy() {
        clearInterval(this.intervalId);
    }
}
</script>

<style lang="scss" scoped>
.card-item {
    background-color: #ffffff;
    border-radius: 7px;
    overflow: hidden;
}

.card-item .item-chart {
    min-height: 60px;
}
</style>
